<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden; /* Prevent body from scrolling */
        }

        .scrollable-container {
            height: 100vh;
            overflow-y: auto; /* Enable vertical scrolling */
        }

        .right-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .search-input {
            color: gray;
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            border: none;
            width: 150px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .a {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .left-section .element {
            width: 200px;
            height: 140px;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            background-color: transparent;
            transition: all 0.3s ease;
        }

        .container .element {
            width: 200px;
            height: 100px;
            padding: 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            border: none;
            cursor: pointer;
        }

        .container {
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
        }

        .photo {
            width: 200px;
            height: 100px;
            background-color: #ddd;
            margin-right: 20px;
            background-image: url('图片库/logo.png');
            background-size: 100% 100%;
            background-position: center;
        }

        .b {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }

        .content-container {
            display: flex;
            height: 100%;
            position: relative;
        }

        .left-section {
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }

        .right-image-section {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .background-image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .full-image {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Ensure the entire image is visible */
            display: block;
        }

        .login-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .login-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }

        .login-content form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .login-content form label,
        .login-content form input {
            margin: 10px;
        }

        .login-content input[type="submit"] {
            background-color: lightblue;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }

        .login-content input[type="submit"]:hover {
            background-color: red;
        }

        .left-section .element:hover {
            background-color: yellow;
            color: black;
            border-color: transparent;
        }

        .recent-topic {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
        }

        .recent-topic span {
            font-size: 24px;
        }

        /* 新增图片容器样式 */
       .food-images-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

       .single-food-image {
            text-align: center;
            margin: 10px;
        }

       .btn-group {
            margin-top: 10px;
        }

       .new-feature-btn {
            width: 80px;
            height: 30px;
            border: none;
            background-color: #007BFF;
            color: white;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .new-feature-btn.active {
            background-color: #dc3545;
        }

       .everyone-saying-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #fff;
            width: 100%;
            box-sizing: border-box;
            font-size: 24px;
        }

       .everyone-saying-image {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

       .everyone-saying-image img {
            max-width: 100%;
            height: auto;
        }

       .subscript-image {
            width: 100%;
            text-align: center;
            margin-top: 20px; /* 空一行的间距 */
        }

       .subscript-image img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="scrollable-container" id="scrollable-container">
        <!-- Existing content -->
        <div class="right-container">
            <input type="text" class="search-input" placeholder="搜一搜">
            <div class="a" id="login-btn">登录</div>
        </div>
        <div class="container">
            <div class="photo"></div>
            <div class="element">首页</div>
            <div class="element">生鲜</div>
            <div class="element">电器</div>
            <div class="element" id="new-topic">最新专题</div>
            <div class="element" id="everyone-saying">大家都在说</div>
        </div>
        <div class="b">
            <div class="content-container">
                <!-- 背景图容器 -->
                <div class="background-image-container">
                    <img src="图片库/背景.png" alt="" class="full-image">
                </div>
                <div class="left-section">
                    <div class="element" id="element1">生鲜 水果</div>
                    <div class="element" id="element2">电器 床品</div>
                    <div class="element" id="element3">洗护 洗发</div>
                    <div class="element" id="element4">服装 长裤</div>
                    <div class="element" id="element5">杂货 户外</div>
                </div>
            </div>
        </div>

        <!-- 新增最新专题行 -->
        <div class="recent-topic" id="new-topic-target">
            <span>最新专题</span>
            <span>全部</span>
        </div>

        <!-- 新增图片部分 -->
        <div class="food-images-container">
            <div class="single-food-image">
                <img src="图片库/美食图1.png" alt="美食图1">
                <div class="btn-group">
                    <button class="new-feature-btn">功能1</button>
                    <button class="new-feature-btn">功能2</button>
                    <button class="new-feature-btn">功能3</button>
                </div>
            </div>
            <div class="single-food-image">
                <img src="图片库/美食图2.png" alt="美食图2">
                <div class="btn-group">
                    <button class="new-feature-btn">功能1</button>
                    <button class="new-feature-btn">功能2</button>
                    <button class="new-feature-btn">功能3</button>
                </div>
            </div>
            <div class="single-food-image">
                <img src="图片库/美食图3.png" alt="美食图3">
                <div class="btn-group">
                    <button class="new-feature-btn">功能1</button>
                    <button class="new-feature-btn">功能2</button>
                    <button class="new-feature-btn">功能3</button>
                </div>
            </div>
        </div>

        <!-- 新增大家都在说标题行 -->
        <div class="everyone-saying-title" id="everyone-saying-target">
            <span>大家都在说</span>
            <span>全部</span>
        </div>

        <!-- 新增大家都在说图片 -->
        <div class="everyone-saying-image">
            <img src="图片库/大家都在说.png" alt="大家都在说">
        </div>

        <!-- 新增下标图 -->
        <div class="subscript-image">
            <img src="图片库/下标图.png" alt="下标图">
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div class="login-modal" id="login-modal">
        <div class="login-content">
            <span class="close" id="close-btn">&times;</span>
            <h2>登录</h2>
            <form>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
                <input type="submit" value="登录">
            </form>
        </div>
    </div>

    <script>
        const loginBtn = document.getElementById('login-btn');
        const closeBtn = document.getElementById('close-btn');
        const loginModal = document.getElementById('login-modal');
        const scrollableContainer = document.getElementById('scrollable-container');

        loginBtn.addEventListener('click', function () {
            loginModal.style.display = 'flex';
        });

        closeBtn.addEventListener('click', function () {
            loginModal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target === loginModal) {
                loginModal.style.display = 'none';
            }
        });

        // 添加下滑功能
        scrollableContainer.addEventListener('wheel', function (event) {
            const delta = Math.sign(event.deltaY);
            const scrollAmount = 100;
            scrollableContainer.scrollTop += delta * scrollAmount;
            event.preventDefault();
        });

        // 新功能按钮点击事件
        document.addEventListener('DOMContentLoaded', function () {
    // 获取导航元素
    const newTopicNav = document.getElementById('new-topic');
    const everyoneSayingNav = document.getElementById('everyone-saying');
    // 获取目标区域元素
    const newTopicTarget = document.getElementById('new-topic-target');
    const everyoneSayingTarget = document.getElementById('everyone-saying-target');

    // 为“最新专题”导航元素添加点击事件监听器
    newTopicNav.addEventListener('click', function () {
        newTopicTarget.scrollIntoView({ behavior: 'smooth' });
    });

    // 为“大家都在说”导航元素添加点击事件监听器
    everyoneSayingNav.addEventListener('click', function () {
        everyoneSayingTarget.scrollIntoView({ behavior: 'smooth' });
    });
});
    </script>
</body>

</html>    